<template>
  <Transition name="fade1">
    <div
      class="my-modal fixed bottom-24% left-0 right-0 text-black w-45% p-2em rounded-20px mx-auto"
    >
      {{ finalMsg }}
    </div>
  </Transition>
</template>
<script setup>
import { onMounted, ref } from "vue";
// eslint-disable-next-line
const props = defineProps({
  msg: {
    type: String,
    default: ''
  }
})
const finalMsg = ref('')
function resolveMsg(strArr) {
  if (strArr.length) {
    finalMsg.value += strArr.shift()
    setTimeout(()=>{
      resolveMsg(strArr)
    },400)
  }
}
onMounted(() => {
  resolveMsg(props.msg.split(''))
});
</script>
<style scoped>
.my-modal {
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 25px;
  box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.2);
}
</style>
